<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>9.Vue.extend的简写方式</title>
		<style>
			.person{
				background-color: skyblue;
				padding: 20px;
			}
			.app{
				background-color: gray;
				padding: 20px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//定义一个Person组件
			let Person = {
				name:'Person',
				template:`
					<div class="person">
						<h1>我是Person组件</h1>
						<h3>我是叫{{name}}</h3>
						<h3>我今年{{age}}岁了</h3>
					</div>
				`,
				data(){
					return {
						name:'张三',
						age:18
					}
				},
				mounted(){
					console.log('Person组件挂载完毕',this)
				}
			}

			//定义一个App组件
			let App = {
				name:'App',
				components:{Person},
				template:`
					<div class="app">
						<h1>我是App组件</h1>
						<Person/>
					</div>
				`,
				mounted(){
					// console.log('App组件挂载完毕',this)
				}
			}

			//创建vm
			new Vue({
				el:'#demo',
				components:{App},
				template:`<App/>`
			})
			
		</script>
	</body>
</html>